﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout#groups">
    <CodeSnippetTabPage Text="Razor">@(@"<DxFormLayout>
    <DxFormLayoutGroup Caption=""Personal Information"" ColSpanMd=""6"">
        <DxFormLayoutItem Caption=""First Name:"" ColSpanMd=""12"">
            <Template>
                <DxTextBox @bind-Text=""@FirstName""></DxTextBox>
            </Template>
        </DxFormLayoutItem>

        <DxFormLayoutItem Caption=""Last Name:"" ColSpanMd=""12"">
            <Template>
                <DxTextBox @bind-Text=""@LastName""></DxTextBox>
            </Template>
        </DxFormLayoutItem>

        <DxFormLayoutItem Caption=""Birth Date:"" ColSpanMd=""12"">
            <Template>
                <DxDateEdit @bind-Date=""@BirthDate""></DxDateEdit>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayoutGroup>

    <DxFormLayoutGroup Caption=""Work Information"" ColSpanMd=""6"">
        <DxFormLayoutItem Caption=""Position:"" ColSpanMd=""12"">
            <Template>
                <DxTextBox @bind-Text=""@Position""></DxTextBox>
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption=""Hire Date:"" ColSpanMd=""12"">
            <Template>
                <DxDateEdit @bind-Date=""@HireDate""></DxDateEdit>
            </Template>
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption=""Notes:"" ColSpanMd=""12"">
            <Template>
                <DxTextBox @bind-Text=""@Notes""></DxTextBox>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>

@code {
    string FirstName { get; set; } = ""Nancy"";
    string LastName { get; set; } = ""Davolio"";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Position { get; set; } = ""Sales Representative"";
    DateTime HireDate { get; set; } = DateTime.Now.AddYears(-20);
    string Notes { get; set; } = ""Education includes a BA in psychology."";
}")</CodeSnippetTabPage>
</CodeSnippetTabbed>
